<template>
	<view class="signOff-container container">
		<view class="time mt-2 flex  align-center justify-between">

			<span class="">
				签退时间
			</span>
			<time-picker type="time" style="width: 80%;" v-model="totalTime" @change="totalChange">
				<input class="uni-date__input text-right" type="text" v-model="totalTime" placeholder="请选择签退时间" />
			</time-picker>
			<!-- <uni-datetime-picker type="datetime" placeholder="请选择签退时间" v-model="totalTime" @maskClick="maskClick"
				@change="totalChange" style="width: 360rpx;" /> -->
		</view>
		<view class=" tip text-shallow">
			注意：
			<uni-icons type="star-filled" size="15" color="#ffbe22"></uni-icons> 合格&nbsp;
			<uni-icons type="star-filled" size="15" color="#ffbe22" v-for="item in 2"></uni-icons>良好&nbsp;
			<uni-icons type="star-filled" size="15" color="#ffbe22" v-for="item in 3"></uni-icons>优秀 （默认都是良好）
		</view>
		<view class="table mt-3">
			<view class="header text-shallow  p-2 flex  align-center">
				<view class="" style="flex: .9;">姓名</view>
				<view class="" style="flex: 2.5;">签到-签退</view>
				<view class="" style="flex: 1.1;">评价</view>
				<view class="" style="flex: 1.1;">是否积分</view>
			</view>
			<view class="body" >
				<view v-for="(item,index) in showFormidData" :key="item" class="item text-default p-2 flex align-center justify-center">
					<view class="name" style="flex: .9;">

						<view>{{item.nameName}}</view>
						<view v-if="item.status == '1' || item.status == '2' ||item.status == '3' || item.status == '5'"
							class="leave font-sm  flex align-center text-center justify-center" style="color: red;">

							{{item.status == '1'? '待签到':item.status == '2'?'请假审核中':item.status == '3'?'请假':item.status == '5' ?'报名未签到':''}}
						</view>
					</view>
					<view class="time" style="flex: 2.0;">
						<!-- <view class="start" v-if="item.signInTime">{{item.signInTime.slice(5,20)}}</view>
						<view class="start" v-else>{{memberData.beginTime.slice(5,20)}}</view> -->

						<view class="start flex align-center mt-1">
							<view class="">
								{{item.signInTime.slice(5,16) || '--'}}
							</view>
							<time-picker type="time" style="width: 0%;" v-model="totalTime1"
								@change="(e)=>itemChange(e,index,'start')">
								<input v-show="false" class="uni-date__input text-right" type="text"
									style="height: 20px;" v-model="totalTime1" />

								<uni-icons class="ml-1" type="compose" size="23" color="#5967fb"
									@click="dataTimeRevise"></uni-icons>

							</time-picker>

						</view>

						<view class="end flex align-center mt-1">
							<view class="">
								{{item.signOutTime.slice(5,16) || '--'}}
							</view>
							<time-picker type="time" style="width: 0%;" v-model="totalTime1"
								@change="(e)=>itemChange(e,index,'end')">
								<input v-show="false" class="uni-date__input text-right" type="text"
									style="height: 20px;" v-model="totalTime1" />

								<uni-icons class="ml-1" type="compose" size="23" color="#5967fb"
									@click="dataTimeRevise"></uni-icons>

							</time-picker>

						</view>

					</view>
					<view class="rate flex justify-center content-center" style="flex: 1.1;">
						<uni-rate v-model="item.starRate" @change="onChange" max="3" size="20" />
					</view>
					<view class="radio flex justify-center" style="flex: 1;">

						<label class="radio">
							<checkbox :value="item.isIntegral" :checked="item.isIntegral"
								@click="clickCheckbox(item.isIntegral,index)" activeBackgroundColor="#502de5"
								iconColor="#fff" class="checkbox" />
						</label>


					</view>

				</view>

				<!-- <view v-else class="item text-default p-2 flex align-center justify-center  form_title">
					<view class="name" style="flex: .9;">
						<view>{{item.nameName}}</view>
						<view
							class="leave font-sm  flex align-center text-center justify-center" style="color: red;">
							{{item.status == '1' ? '待签到' : item.status == '5' ? '未签到' : ''}}
						</view>

					</view>
					<view class="time" style="flex: 2.0;">
						--

					</view>
					<view class="rate flex justify-center content-center" style="flex: 1.1;">
						<uni-rate v-model="item.id" @change="onChange" max="3" size="20" disabled />
					</view>
					<view class="radio flex justify-center" style="flex: 1;">
						<label class="radio">
							<checkbox value="" :checked="r1" disabled />
						</label>
					</view>
				</view> -->

			</view>



			<LoadingMore :viewMorestatus="viewMorestatus" :viewNum='viewNum' @viewMore="viewMore"></LoadingMore>
		</view>
		<view class="upImg mt-3 ">
			<view><text style="color: red;">*</text>上传图片</view>
			<view class="mt-3">
				<uni-file-picker v-model="imageValue" limit='3' fileMediatype="image" mode="grid" @select="select"
					:image-styles="imageStyles" @progress="progress" @success="success" @fail="fail">
					<template #default>
						<view class="default flex flex-column align-center justify-center"
							style="background-color: #f5f5f5;width: 100%;height: 100%;">
							<view style="height: 60rpx; width: 60rpx;">
								<image src="../../static/icon/upImg.png" mode="" class="img"></image>
							</view>
							<view class="font-sm mt-4">传照片/选填</view>
						</view>
					</template>
				</uni-file-picker>
			</view>
		</view>
		<view class="description mt-3">
			<view><text style="color: red;">*</text>评价描述</view>
			<view class="mt-3">
				<textarea @blur="bindTextAreaBlur" auto-height placeholder="请在此处描述您的留言" class="font-sm"
					v-model="textarea" />
			</view>
		</view>
		<view class="mt-5 signOff " @click="runSiginOut">
			<view class="btn">
				<view class="text">签退</view>
			</view>
			<view class="text-center font-small mt-2" style="color: red;">提示规则：优秀成员所占比例不得大于30%
			</view>
		</view>
	</view>
</template>

<script setup>
	import request from '../../api/index.js'

	import dayjs from 'dayjs';
	import timePicker from '../../uni_modules/uni-datetime-picker/components/uni-datetime-picker/time-picker.vue';
	import {
		upLoadImage
	} from '../../api/common.js'
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import LoadingMore from '../../component/LoadingMore/LoadingMore.vue';
	const value = ref(2)
	const r1 = ref(false)
	const imageStyles = {
		border: {
			radius: '16rpx',
		},
	}
	const totalTime1 = ref('');
	const picker = ref('')
	const textarea = ref('')
	const popup = ref(null);
	const activityData = ref([])

	const activityId = ref('')
	const dataTimeRevise = () => {
		// popup.value.open();
		// picker.$el.click()

	}

	const viewMorestatus = ref('more')
	const viewNum = ref(5)
	const showFormidData = ref([])

	const totalTime = ref('')
	const memberData = ref([])
	const imageValue = ref([])
	
	
	
	
	const viewMore = () => {
		console.log("查看更多")
		viewMorestatus.value = 'loading'
		
		
		let length = memberData.value?.formId?.length;
		
		if ((length - viewNum.value) < 5) {
			console.log("===============================================================")
			viewNum.value = length
		
		} else {
			viewNum.value += 5;
		
		
		}
		console.log("length-------", length)
		console.log("viewNum.value-------", viewNum.value)
		setTimeout(() => {
			if (length >= viewNum.value) {
				activityDetail(activityId.value)
				viewMorestatus.value = 'more'
			}
		
			if (length == viewNum.value) {
				viewMorestatus.value = 'noMore'
			}
		}, 1000)
	}
	

	const totalChange = (e) => {
		console.log("e---------", e);
	
		totalTime.value = e.slice(0,5)
		console.log("totalTime.value---------", totalTime.value);
		console.log(" memberData.value.endTime---------", memberData.value.endTime.slice(0, 10));
		if (e) {
			memberData.value?.formId.forEach(item => {
				item.signOutTime = memberData.value.endTime.slice(0, 10) + ' ' + e.slice(0,5)
			})
		}

	}

	const itemChange = (e, data, type) => {
		console.log("e--------",e)
		if (type == 'end') {
			memberData.value.formId[data].signOutTime = memberData.value.endTime.slice(0, 10) + ' ' + e
		}

		if (type == 'start') {
			memberData.value.formId[data].signInTime = memberData.value.beginTime.slice(0, 10) + ' ' + e
		
		}

	}

	const onChange = (e) => {
		console.log('e', e)
		console.log('memberData.value?.formId', memberData.value?.formId)
		let goodNum = 0;
		let contactNum = 0;
		let length = 0;
		memberData.value?.formId.forEach((item) => {
			console.log("item.status-------", item.status)
			if (item.status != '5' && item.status != '1') {
				console.log("item.status----001---", item.status)
				length++;
			}
			if (item.starRate == 3) {
				goodNum++;
			}
			if (item.title = '联络人' && item.starRate == 3) {
				contactNum++
			}


		})
		console.log('goodNum', goodNum)
		console.log('length', length)

		let isAlert = (goodNum / length) > 0.3 ? true : false
		if (length < 3 && goodNum == 1) {
			isAlert = false
		}
		console.log('contactNum', contactNum)

		console.log('isAlert', isAlert)
		if (isAlert && e.value == 3) {
			uni.showToast({
				title: '优秀成员所占比例不得大于30%,请合理评价',
				icon: 'error'
			})
			return
		}
		if ((contactNum > 1) && e.value == 3) {
			uni.showToast({
				title: '只允许其中一个联络人评价为优秀，请合理评价',
				icon: 'error'
			})
			return
		}

	}




	const clickCheckbox = (e, index) => {
		console.log("e=========0000", e)
		memberData.value.formId[index].isIntegral = !e
		console.log("e=========1111", e)
	}

	//文件上传时触发

	const select = (e) => {
		upLoadImage(e.tempFilePaths[0], imageValue.value)
			.then((result) => {
				console.log('上传成功后的结果:', result);
				imageValue.value = result
				// 这里可以继续处理 result
			})
			.catch((error) => {
				console.error('上传失败:', error);
				// 这里可以处理上传失败的情况
			});
	}
	const progress = () => {

	}
	const success = () => {

	}
	const fail = () => {

	}


	onLoad((options) => {
		console.log('options------------', options.id)
		activityId.value = options?.id
		activityDetail(options?.id)
	})




	const activityDetail = (id) => {

		request({
			url: `/api/volunteer/activity/${id}`

		}, e => {
			if (e.success) {
				console.log('e-------------', e.data)
				memberData.value = e.data
				totalTime.value = memberData.value.endTime

				// console.log("totalTime.value-----------", totalTime.value)
				memberData.value?.formId?.forEach((item) => {
					console.log("item--------", item)
					if (!item?.signInTime) {
						item.signInTime = memberData.value.beginTime
					}
					item.signOutTime = totalTime.value
					if (item?.status == 5 || item?.status == 1 || item?.status == 2 || item?.status == 3) {
						item.isIntegral = false;
						item.signInTime = ''
						item.signOutTime = ''
						item.starRate = 0
					} else {
						item.starRate = 2
					}

				})
				
				

				// 排序
				memberData.value?.formId.sort((a, b) => {

					if (a.status != '5' && b.status == '5') return -1;

					if (a.status == '5' && b.status != '5') return 1;

					return 0;
				});
				
				
				
				
				let length = memberData.value?.formId.length
				if (length < 4) {
					viewMorestatus.value = 'noMore'
				}
				
				let showData = memberData.value?.formId?.slice(0, viewNum.value);
			
				showFormidData.value = showData

				totalTime.value = memberData.value.endTime.slice(11, 19)
			}
		})
	}

	const runSiginOut = () => {
		uni.showLoading({
			title: '加载中',
			mask: true
		});

		console.log('textarea.value00000000000000', textarea.value)
		console.log('memberData.value?.formId', memberData.value?.formId)

		console.log('JSON.stringify(imageValue.value)00000000000000', JSON.stringify(imageValue.value))
		if (imageValue.value?.length < 1) {
			uni.showToast({
				title: '请选择图片',
				icon: 'error'
			})
			return
		}
		if (!textarea.value) {
			uni.showToast({
				title: '请输入文本框',
				icon: 'error'
			})
			return
		}
		const now = dayjs();
		const formattedDateTime = memberData.value.endTime.slice(0, 10) + ' ' + totalTime.value
		console.log("formattedDateTime-----------", formattedDateTime);
		request({
			url: '/api/volunteer/activity/signout',
			method: 'POST',
			data: {
				id: activityId.value,
				signOutTime: formattedDateTime,
				signOutImg: JSON.stringify(imageValue.value),
				signOutDescribe: textarea.value,
				activityBd: memberData.value?.formId
			}

		}, e => {
			if (e.success) {
				console.log('e-------------', e.data)
				uni.showToast({
					title: '签退成功',
					icon: 'success'
				})
				uni.navigateBack(-1);

			} else {
				uni.showToast({
					title: e.errorMessage,
					icon: 'error'
				})
			}
		})
	}
	onMounted(() => {

	})
</script>

<style lang="scss" scoped>
	::v-deep.uni-date {
		width: 40rpx;
		// background-color: #ff0203;
		// border: none !important;
		flex: none;
	}

	::v-deep.uni-date {
		// width: 360rpx !important;
	}

	::v-deep.uni-date-x--border {
		border: none;
	}

	.tip {
		margin-top: 60rpx;
		font-size: 24rpx;
	}

	.table {
		.header {
			background-color: #f5f5f5;

			view:nth-child(2) {
				width: 38%;
			}
		}

		.body {
			max-height: 750rpx;
			overflow-y: scroll;
			border-bottom: 1rpx solid #eeeeee;

			.name {
				.leave {

					width: 80rpx;
					padding: 3rpx;
					margin-right: 2rpx;
					background-color: #fcebeb;
					border-radius: 4rpx;

				}
			}


			.time {
				// background-color: red;
				font-size: 28rpx;
				margin-left: -10rpx;
			}

			::v-deep.uni-checkbox-input {
				border-radius: 50%;
			}
		}
	}

	.default {
		color: #999999;
		background-color: #f5f5f5;
		width: 100%;
		height: 100%;
	}

	.signOff {
		// background-color: #999999;
		padding: 100rpx 0;

		.btn {
			margin: auto;
			width: 180rpx;
			height: 180rpx;
			left: 50%;
			bottom: 42rpx;
			background: linear-gradient(0deg, #ff0203 0%, #ff9090 100%);
			border-radius: 50%;

			.text {
				line-height: 180rpx;
				text-align: center;
				font-size: 32rpx;
				color: #fff;
			}
		}
	}

	.img {
		width: 100%;
		height: 100%;
	}
</style>